requirejs.config({
	paths :{
		jquery : "jquery-1.11.3",	
//		detail : "details"
	}
})

requirejs(["jquery"],function($){

	$(function(){
	//加载头部和底部
	$("#public_top").load("header.html ")
	$("#footer").load("footer.html ")
	
	$.getJSON("../json/datalist.json",function(data){
		let json = data;
		var str = "";
		for(let i = 0;i<json.length;i++){
			str +=`
					<li>
	    				<a href="">
	    					<img src="${json[i].url}" alt="" />
	    					<b>${json[i].introduce}</b>
	    					<span>￥${json[i].price}</span>
	    					<span>￥${json[i].oldPrice}</span>
	    				</a>
	    			</li>
				  `
		}
		$(".ranking ul").html(str);
		$(".like ul").html(str);
		$(".other ul").html(str);
		$(".lookthrough ul").html(str);
		
		$(".ranking ul li").mouseover(function(){
		$(this).find("b")
				.css({
			'color':"pink"
		});
	}).mouseleave(function(){
		$(this).find("b")
				.css({
			'color':"#666"
		})
	})
		
})
	
	var num = location.href;
	if(num==null){
		return ;
	}
	
	$.getJSON("../json/details.json",function(data){
		let json = data;
		$.each(json, function(index,value) {
			console.log(index,value)
			$(".small-pic li").eq(index)
							  .append("<img src='../images/"+value.img+"' alt=''/>")
			$(".bigPic li").eq(index)
							  .append("<img src='../images/"+value.img+"' alt=''/>")
			$(".big-show li").eq(index)
							  .append("<img class='bigimage' src='../images/"+value.img+"' alt=''/>")
		})
//		for(var i = 0;i<json[num].length;i++){
//			$(".small-pic li").eq(index)
//							  .append("<img src='../images/"+json[num].img+"' alt=''/>")
//			$(".bigPic li").eq(index)
//							  .append("<img src='../images/"+json[num].img+"' alt=''/>")
//			$(".big-show li").eq(index)
//							  .append("<img class='bigimage' src='../images/"+json[num].img+"' alt=''/>")
//		}
		
	})


//放大镜功能实现
		//滑过小图显示对应的中图和大图
		$(".small-pic li").mouseenter(function(){
			var index =$(this).index();
			console.log(index)
//			$("#float").show()
			$(this).css({'border':'1px solid red'})
			$(".bigPic>ul>li").eq(index-1)
						   .show()
						   .siblings()
						   .hide()		
		    $(".big-show>li").eq(index-1)
						   .show()
						   .siblings()
						   .hide()		
		}).mouseleave(function(){
			$(this).css({'border':'1px solid #e8e8e8'})
		})
		
		$(".bigPic ").mouseenter(function(){
			$("#float").show()
			$(".big-show").show()
//			$(".big-show img").addClass("bigimage")
		}).mouseleave(function(){
			$("#float").hide()
		}).mousemove(function(e){
			var e = e || event;
			var x = e.pageX - $(".bigPic").offset().left - $("#float").outerWidth()/2;
			var y = e.pageY - $(".bigPic").offset().top - $("#float").outerHeight()/2;
			var maxL = $(".bigPic").outerWidth() - $("#float").outerWidth();
			var maxT = $(".bigPic").outerHeight() - $("#float").outerHeight();
			 x = Math.min( maxL,Math.max(0,x));
			 y = Math.min( maxT,Math.max(0,y));
//			 console.log(Left,Top);
			$("#float").css({
				'left':x,
				'top':y
			})
			
			//大图/小图 = 大图位置/小图位置
			var bigImgX = $(".big-show").width()/$(".bigPic").width() * (x+110);
			var bigImgY = $(".big-show").height()/$(".bigPic").height() * (y+110);
			$(".big-show img").css({
				'left':-bigImgX,
				'top':-bigImgY
			})
//			console.log(bigImgX,bigImgY)
		})
		
		
		
		//选项卡功能
		$(".advantege ul li").mouseover(function(){
			var index = $(this).index();
			$(".advantege img").eq(index)
							   .show()
							   .siblings()
							   .hide()
		})
		
		//点击li仿楼梯跳转功能
		$(".louceng li a").click(function(e){
			var index = $(this).parent('li').index();
			switch(index){
				case 0:
					$(window).scrollTop($(".introduce").offset().top);
					break;
				case 1:
					$(window).scrollTop($(".details-img").offset().top);
					break;
				case 2:
					$(window).scrollTop($(".oral").offset().top);
					break;
				case 3:
					$(window).scrollTop($(".advantege").offset().top);
					break;
				case 4:
					$(window).scrollTop($(".advantege").offset().top);
					break;
			}
		})
		
		//对高度判断是否显示选项栏
		$(window).scroll(function(event){
			//event.stopPropagation();
			if($(window).scrollTop()>$(".introduce").offset().top){
				$(".louceng").css({
					'position':'fixed',
					'top':0
				})
			}else{
				$(".louceng").css({
					'position':'inherit',
					'top':0,
					'z-index':5
				})
			}
		})
	})
})
